<template>
	<view class="videoList">
		<view class="swiper-box">
			<swiper class="swiper" vertical="true" @change="change" @touchstart="touchStart" @touchend="touchEnd">
				<swiper-item v-for="(item,index) of videos" :key="item.id">
					<view class="swiper-item">
						<video-player @changeClick="changeClick" ref="player" :video="item" :index="index"></video-player>
					</view>
					<view class="left-box">
						<list-left :item="item"></list-left>
					</view>
					<view class="right-box">
						<list-right @open="openComment" :item="item" ref="change"></list-right>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view v-show="commentShow==true" class="comment-box">
			<comment-list @closeIt="closeIt" class="comment-box"></comment-list>
		</view>
	</view>
</template>

<script>
	import videoPlayer from "./videoPlayer.vue";
	import listLeft from "./listLeft.vue";
	import listRight from "./listRight.vue";
	import commentList from "./comment.vue";
	let time = null;
	export default {
		props: ['list'],
		components: {
			videoPlayer,
			listLeft,
			listRight,
			commentList,

		},
		name: "videoList",
		data() {
			return {
				videos: [],
				pageStartY: 0,
				pageEndY: 0,
				pageId: 0,
				commentShow: false
			};
		},
		watch: {
			list() {
				this.videos = this.list;
			}
		},
		methods: {
			closeIt() {
				// console('aasdfka');
				if (this.commentShow == true) {
					this.commentShow = false;
				}
			},
			openComment() {
				// console.log('open');
				if (this.commentShow == false) {
					this.commentShow = true;
				}
			},
			changeClick() {
				console.log('父组件接收到消息！！');
				this.$refs.change.changeColor();
			},
			change(res) {
				clearTimeout(time);
				this.pageId = res.detail.current;
				let that = this;
				time = setTimeout(() => {
					// 判断上滑还是下滑
					if (this.pageStartY < this.pageEndY) {
						//这里的$refs是指调用子组件里面的方法
						this.$refs.player[that.pageId].player();
						this.$refs.player[that.pageId + 1].pause();
						this.pageStartY = 0;
						this.pageEndY = 0;
					} else {
						this.$refs.player[that.pageId].player();
						this.$refs.player[that.pageId - 1].pause();
						this.pageStartY = 0;
						this.pageEndY = 0;
					}
				}, 1)
			},
			touchStart(res) {
				this.pageStartY = res.changedTouches[0].pageY;
			},
			touchEnd(res) {
				this.pageEndY = res.changedTouches[0].pageY;
			}

		}
	}
</script>

<style>
	.videoList {
		width: 100%;
		height: 100%;
	}

	.swiper-box {
		width: 100%;
		height: 100%;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		z-index: 19;
	}

	.left-box {
		z-index: 20;
		position: absolute;
		bottom: 50px;
		left: 10px;
	}

	.right-box {
		z-index: 20;
		position: absolute;
		bottom: 50px;
		right: 10px;

	}

	.comment-box {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 23;
		/* display: flex;
	align-items: center;
	justify-content: center; */
		height: 500px;
		width: 100%;
	}
</style>
